<template>
  <div class="box">
    <img class="icon1" src="@/assets/box/gradientLines1.png" alt="" />
    <img class="icon2" src="@/assets/box/gradientLines2.png" alt="" />
    <img class="icon3" src="@/assets/box/gradientLines3.png" alt="" />
    <img class="icon4" src="@/assets/box/gradientLines4.png" alt="" />
    <slot></slot>
  </div>
</template>

<style lang="scss" scoped>
.box {
  display: inline-block;
  position: relative;
  padding: 14px 20px 20px;

  background: linear-gradient(
    125deg,
    rgba(151, 175, 227, 0) 0%,
    rgba($color: #193262, $alpha: 0.5) 100%
  );
  .icon1 {
    position: absolute;
    left: 6px;
    top: 6px;
    width: 26px;
    height: 26px;
  }

  .icon2 {
    position: absolute;
    width: 26px;
    right: 6px;
    top: 6px;
    height: 26px;
  }

  .icon3 {
    bottom: 6px;
    right: 6px;
    position: absolute;
    width: 26px;
    height: 26px;
  }

  .icon4 {
    bottom: 6px;
    left: 6px;
    position: absolute;
    width: 26px;
    height: 26px;
  }
}
</style>
